<template>
  <div :class="['order-detail',this.$store.state.locale == 'en'?'order-detail-en':'']">
    <div class="content">
      <div class="crumbs">
        <a class="item-a" @click="userCenter()">{{$t('orderDetails.personalCenter')}}</a>
        <span class="arrow">></span>
        <span class="item-span">{{$t('orderDetails.orderDetails')}}</span>
      </div>
      <!-- 订单状态 -->
      <div class="status-process">
        <div class="status-box">
          <div class="order-number">{{$t('orderDetails.orderNumber')}}：{{ orderNumber }}</div>
          <div class="status">
            {{
              [
                '',
                $t('pendingPayment'),
                $t('pendingDelivery'),
                $t('pendingReceipt'),
                $t('pendinEvaluation'),
                $t('completed'),
                $t('canceled'),
                $t('grouping')
              ][orderInfo.status]
            }}
          </div>
          <div
            class="description"
            v-if="orderInfo.status == 1 && betweenTime.signs == 1"
          >
            {{$t('orderDetails.remainingTime')}} {{ betweenTime.min + ':' + betweenTime.sec }}
          </div>
          <div class="action" v-if="orderInfo.cancelTime === null">
            <a
              href="javascript:void(0);"
              class="action-a red"
              v-if="orderInfo.status == 1"
              @click="toPayment()"
              >{{$t('orderDetails.payNow')}}</a
            >
            <a
              href="javascript:void(0);"
              class="action-a"
              v-if="orderInfo.status == 1"
              @click="showTips = true"
              >{{$t('orderDetails.cancellation')}}</a
            >
            <!-- <a href="javascript:void(0);" class="action-a btn" v-if="orderInfo.status==2 || orderInfo.status == 3">申请退款</a>
            <a href="javascript:void(0);" class="action-a btn" v-if="orderInfo.status==4">立即评价</a>
            <a href="javascript:void(0);" class="action-a btn" v-if="orderInfo.status==5">再次购买</a>
            <a href="javascript:void(0);" class="action-a btn" v-if="orderInfo.status==5">立即购买</a>-->
          </div>
        </div>
        <div class="process-box">
          <div class="tip">
            {{$t('orderDetails.informationTips')}}
          </div>
          <div class="process">
            <div :class="['item', orderInfo.status >= 1 ? 'active' : '']">
              <div class="img process01"></div>
              <div class="text">{{$t('orderDetails.submitOrder')}}</div>
              <div class="time">{{ orderInfo.createTime }}</div>
            </div>
            <div
              :class="[
                'item',
                orderInfo.status >= 2 && orderInfo.payTime !== null
                  ? 'active'
                  : ''
              ]"
            >
              <div class="img process02"></div>
              <div class="text">{{$t('orderDetails.buyerPayment')}}</div>
              <div class="time">{{ orderInfo.payTime }}</div>
            </div>
            <div
              :class="[
                'item',
                orderInfo.status >= 3 && orderInfo.dvyTime !== null
                  ? 'active'
                  : ''
              ]"
            >
              <div class="img process03"></div>
              <div class="text">{{$t('orderDetails.goodsOut')}}</div>
              <div class="time">{{ orderInfo.dvyTime }}</div>
            </div>
            <div
              :class="[
                'item',
                orderInfo.status >= 3 && orderInfo.dvyTime !== null
                  ? 'active'
                  : ''
              ]"
            >
              <div class="img process04"></div>
              <div class="text">{{$t('orderDetails.waitingForReceipt')}}</div>
              <div class="time">{{ orderInfo.dvyTime }}</div>
            </div>
            <div
              :class="[
                'item',
                orderInfo.status >= 5 && orderInfo.fianllyTime !== null
                  ? 'active'
                  : ''
              ]"
            >
              <div class="img process05"></div>
              <div class="text">{{$t('orderDetails.orderCompletion')}}</div>
              <div class="time">{{ orderInfo.fianllyTime }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- /订单状态 -->
      <!-- 配送信息 -->
      <div class="delivery-box" v-if="deliveryList.length">
        <div class="box-tab" v-if="deliveryList.length > 1">
          <div
            :class="indexs === index ? 'item active' : 'item'"
            @click="onClickTabDelivery(item, index)"
            v-for="(item, index) in deliveryList"
            :key="index"
          >
            {{$t('orderDetails.packages')}}{{ index + 1 }}
          </div>
        </div>
        <div class="box-con" v-if="deliveryExpresse">
          <div class="deliver-msg">
            <div class="d-item">
              <div class="text">{{$t('orderDetails.shipmenttime')}}：</div>
              <div class="res">{{ deliveryExpresse.createTime }}</div>
            </div>
            <div class="d-item">
              <div class="text">{{$t('orderDetails.courierCompany')}}：</div>
              <div class="res">
                {{ deliveryExpresse.deliveryDto.companyName }}
              </div>
            </div>
            <div class="d-item">
              <div class="text">{{$t('orderDetails.waybillNumber')}}：</div>
              <div class="res">
                {{ deliveryExpresse.deliveryDto.dvyFlowId }}
              </div>
            </div>
            <div
              class="d-goods"
              :class="{ over: deliveryExpresse.orderItems.length > 5 }"
            >
              <div
                class="arrow prev"
                @click="prevItem"
                :class="{
                  disable:
                    deliveryExpresse.orderItems.length - 5 <= 0 ||
                    this.offsetCount < 1
                }"
              ></div>
              <div
                class="arrow next"
                @click="nextItem"
                :class="{
                  disable:
                    deliveryExpresse.orderItems.length - 5 <= 0 ||
                    this.offsetCount >= deliveryExpresse.orderItems.length - 5
                }"
              ></div>
              <div class="item-goods">
                <div class="goods-box" ref="carouser">
                  <div
                    class="item"
                    v-for="(orderItem, index) in deliveryExpresse.orderItems"
                    :key="index"
                  >
                    <div class="img">
                      <img :src="orderItem.pic" alt />
                      <div class="number">×{{ orderItem.prodCount }}</div>
                    </div>
                    <div class="name">{{ orderItem.prodName }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="logistics">
            <div class="l-tit" v-if="deliveryExpresse">
              <span class="text">{{$t('orderDetails.logisticsStatus')}}：</span>
              <span
                class="l-state"
                v-if="deliveryExpresse.deliveryDto.state === 0"
                >{{$t('orderDetails.noRecords')}}</span
              >
              <span
                class="l-state"
                v-if="deliveryExpresse.deliveryDto.state === 1"
                >{{$t('orderDetails.received')}}</span
              >
              <span
                class="l-state"
                v-if="deliveryExpresse.deliveryDto.state === 2"
                >{{$t('orderDetails.inTransit')}}</span
              >
              <span
                class="l-state"
                v-if="deliveryExpresse.deliveryDto.state === 3"
                >{{$t('orderDetails.signed')}}</span
              >
              <span
                class="l-state"
                v-if="deliveryExpresse.deliveryDto.state === 201"
                >{{$t('orderDetails.reachCity')}}</span
              >
              <span
                class="l-state"
                v-if="deliveryExpresse.deliveryDto.state === 4"
                >{{$t('orderDetails.faultyPackages')}}</span
              >
            </div>
            <div class="logistics-box">
              <div v-if="deliveryExpresse.deliveryDto.traces && deliveryExpresse.deliveryDto.traces.length">
                <div
                  class="item"
                  v-for="(trace, index) in deliveryExpresse.deliveryDto.traces"
                  :key="index"
                >
                  <div class="time">{{ trace.acceptTime }}</div>
                  <div class="text">{{ trace.acceptStation }}</div>
                </div>
              </div>
              <div
                class="item"
                v-if="!deliveryExpresse.deliveryDto.traces.length || !deliveryExpresse.deliveryDto.traces"
              >
                {{$t('orderDetails.logisticsTips1')}}
              </div>
              <div
                class="item"
                v-if="orderInfo.status >= 3 && orderInfo.dvyTime !== null"
              >
                <div class="time">{{ orderInfo.dvyTime }}</div>
                <div class="text">{{$t('orderDetails.logisticsTips2')}}</div>
              </div>
              <div
                class="item"
                v-if="orderInfo.status >= 2 && orderInfo.payTime !== null"
              >
                <div class="time">{{ orderInfo.payTime }}</div>
                <div class="text">{{$t('orderDetails.logisticsTips3')}}</div>
              </div>
              <div class="item" v-if="orderInfo.status >= 1">
                <div class="time">{{ orderInfo.createTime }}</div>
                <div class="text">{{$t('orderDetails.logisticsTips4')}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /配送信息 -->
      <!-- 订单信息 -->
      <div class="order-info">
        <div class="item">
          <div class="tit">{{['', $t('orderDetails.receiptInformation'), $t('orderDetails.selfPickupInformation'), $t('orderDetails.receiptInformation'), $t('orderDetails.receiptInformation')][dvyType]}}</div>
          <div class="con" v-if="dvyType!=3">
            <div class="con-item">
              <span class="item-tit">{{['', $t('orderDetails.receiver'), $t('orderDetails.picker'), $t('orderDetails.receiver'), $t('orderDetails.receiver')][dvyType]}}：</span>
              <span class="item-con">{{dvyType==2?stationUserName:userAddrDto.receiver}}</span>
            </div>
            <div class="con-item">
              <span class="item-tit">{{$t('orderDetails.contactInformation')}}：</span>
              <span class="item-con">{{dvyType==2?stationUserMobile:userAddrDto.mobile}}</span>
            </div>
            <div class="con-item">
              <span class="item-tit">{{['', $t('orderDetails.receiptAddress'), $t('orderDetails.pickupAddress'), $t('orderDetails.receiptAddress'), $t('orderDetails.receiptAddress')][dvyType]}}：</span>
              <span class="item-con">{{dvyType==2?stationAddress:userAddrDto.province+userAddrDto.city+userAddrDto.area+userAddrDto.addr}}</span>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="tit">{{$t('orderDetails.deliveryInformation')}}</div>
          <div class="con">
            <div class="con-item">
              <span class="item-tit">{{$t('orderDetails.deliveryMethod')}}：</span>
              <span class="item-con" v-if="dvyType">{{
                [$t('orderDetails.generalDelivery'), $t('orderDetails.buyerPickup'), $t('orderDetails.noExpressDelivery'), $t('orderDetails.sameCityDelivery')][dvyType - 1]
              }}</span>
              <span class="item-con" v-if="!dvyType">{{$t('orderDetails.none')}}</span>
            </div>
            <div class="con-item">
              <span class="item-tit">{{$t('orderDetails.shippingFee')}}：</span>
              <span class="item-con"
                >￥{{ parsePrice(orderInfo.transfee)[0] }}.{{
                  parsePrice(orderInfo.transfee)[1]
                }}</span
              >
            </div>
            <!-- <div class="con-item">
              <span class="item-tit">物流信息：</span>
              <span class="item-con"
                >￥大概的风格发的广泛地个发的发的是非官方的广泛的的大概的</span
              >
            </div> -->
          </div>
        </div>
        <div class="item">
          <div class="tit">{{$t('orderDetails.paymentInformation')}}</div>
          <div class="con">
            <div class="con-item">
              <span class="item-tit">{{$t('orderDetails.paymentMethod')}}：</span>
              <span class="item-con">{{$t('orderDetails.onlinePayment')}}</span>
            </div>
            <div class="con-item">
              <span class="item-tit">{{$t('orderDetails.totalMerchandise')}}：</span>
              <span class="item-con"
                >￥{{ parsePrice(orderInfo.total)[0] }}.{{
                  parsePrice(orderInfo.total)[1]
                }}</span
              >
            </div>
            <div class="con-item">
              <span class="item-tit">{{$t('orderDetails.offerAmount')}}：</span>
              <span class="item-con"
                >-￥{{ parsePrice(orderInfo.reduceAmount)[0] }}.{{
                  parsePrice(orderInfo.reduceAmount)[1]
                }}</span
              >
            </div>
            <!-- <div class="con-item">
              <span class="item-tit">　优惠券：</span>
              <span class="item-con">￥{{parsePrice(orderInfo.couponMoney?orderInfo.couponMoney:0)[0]}}.{{parsePrice(orderInfo.couponMoney?orderInfo.couponMoney:0)[1]}}</span>
            </div>-->
            <div class="con-item">
              <span class="item-tit">{{orderInfo.status == 1 ? $t('orderDetails.amountPayable') : $t('orderDetails.actualAmount')}}</span>
              <span>
                <span v-if="orderInfo.actualTotal" class="item-con">￥{{ parsePrice(orderInfo.actualTotal)[0] }}.{{parsePrice(orderInfo.actualTotal)[1]}}</span>
                <span v-if="orderInfo.actualTotal && orderInfo.orderScore">+</span>
                <span v-if="orderInfo.orderScore">{{ orderInfo.orderScore }} {{$t('orderDetails.points')}}</span>
              </span>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="tit">{{$t('orderDetails.orderRemarks')}}</div>
          <div class="con">
            <div class="con-item">
              <!-- <span class="item-tit">发票类型：</span> -->
              <span class="item-con">{{ orderInfo.remarks }}</span>
            </div>
            <!-- <div class="con-item">
              <span class="item-tit">发票抬头：</span>
              <span class="item-con">个人</span>
            </div>
            <div class="con-item">
              <span class="item-tit">发票内容：</span>
              <span class="item-con">商品明细</span>
            </div>-->
          </div>
        </div>
        <!-- <div class="item">
          <div class="tit">发票信息</div>
          <div class="con">
            <div class="con-item">
              <span class="item-tit">发票类型：</span>
              <span class="item-con">电子普通发票</span>
            </div>
            <div class="con-item">
              <span class="item-tit">发票抬头：</span>
              <span class="item-con">个人</span>
            </div>
            <div class="con-item">
              <span class="item-tit">发票内容：</span>
              <span class="item-con">商品明细</span>
            </div>
          </div>
        </div>-->
      </div>
      <!-- /订单信息 -->
      <!-- 商品信息 -->
      <div class="goods-box">
        <div class="shop">
          <span class="shop-icon"></span>
          <a
            href="javascript:void(0)"
            @click="toShopPage(orderInfo.shopId)"
            class="name"
            >{{ orderInfo.shopName }}</a
          >
        </div>
        <div class="goods-con">
          <div class="order-table">
            <table cellspacing="0" cellpadding="0" class="box">
              <tbody>
                <tr class="box-tit">
                  <th>{{$t('products')}}</th>
                  <th width="100" class="tal">{{$t('quantity')}}</th>
                  <th width="140">{{$t('priceOne')}}</th>
                  <th width="140">{{$t('totalAll')}}</th>
                  <th width="140">{{$t('operation')}}</th>
                </tr>
                <tr
                  class="box-tr"
                  v-for="(prod, prodIndex) in orderInfo.orderItemDtos"
                  :key="prodIndex"
                >
                  <td>
                    <div class="goods-info">
                      <a
                        :href="
                          (orderInfo.orderType == 3
                            ? '/member-center/integral-det/'
                            : '/detail/') + prod.prodId
                        "
                        class="img"
                      >
                        <img :src="prod.pic" alt />
                      </a>
                      <div class="name-sku">
                        <a
                          :href="
                            (orderInfo.orderType == 3
                              ? '/member-center/integral-det/'
                              : '/detail/') + prod.prodId
                          "
                          class="name"
                          >{{ prod.prodName }}</a
                        >
                        <span class="sku">{{ prod.skuName }}</span>
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="goods-number">×{{ prod.prodCount }}</div>
                  </td>
                  <td>
                    <span class="price"
                      >￥{{ parsePrice(prod.price)[0] }}.{{
                        parsePrice(prod.price)[1]
                      }}</span
                    >
                  </td>
                  <td>
                    <span class="price"
                      >￥{{ parsePrice(prod.productTotalAmount)[0] }}.{{
                        parsePrice(prod.productTotalAmount)[1]
                      }}</span
                    >
                  </td>
                  <!-- <td>
                    <div class="status">{{['','待付款','待发货','待收货','待评价','已完成','已取消'][orderInfo.status]}}</div>
                  </td>-->

                  <td>
                    <div class="action">
                      <!-- <a href="javascript:void(0)"
                         @click="payNow(prod.prodId,orderInfo.status)"
                      :class="['action-btn', orderInfo.status>4?'default':'active']">{{['','立即付款','提醒卖家','确认收货','发表评论','再次购买','立即购买'][5]}}</a>-->
                      <!-- 退款条件：拟退款条件，还有未知判定条件 -->
                      <a
                        href="javascript:void(0)"
                        v-if="
                          orderInfo.canRefund &&
                            !prod.refundSn &&
                            orderInfo.orderType != 3
                        "
                        :class="['action-btn']"
                        @click="toApplyReturn(prod.orderItemId, 2)"
                        >{{$t('orderDetails.requestRefund')}}</a
                      >
                      <a
                        href="javascript:void(0)"
                        v-if="prod.refundSn"
                        :class="['action-btn']"
                        @click="
                          toViewRefund(
                            prod.refundSn,
                            2,
                            prod.orderItemId,
                            prod.returnMoneySts
                          )
                        "
                        >{{$t('orderDetails.viewRefund')}}</a
                      >
                      <a
                        href="javascript:void(0)"
                        v-if="orderInfo.status === 4"
                        :class="['action-btn']"
                        >{{$t('orderDetails.evaluation')}}</a
                      >
                      <a
                        href="javascript:void(0)"
                        v-if="(orderInfo.status > 4 || orderInfo.cancelTime !==null) && orderInfo.status != 7"
                        @click="toProdDetail(prod.prodId)"
                        :class="['action-btn']"
                      >{{$t('orderDetails.repurchase')}}</a>
                      <!-- @click="orderRoute(prod.prodId)" -->
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <div class="total-return">
              <a
                href="javascript:void(0)"
                v-if="
                  orderInfo.canRefund &&
                    orderInfo.canAllRefund &&
                    !orderInfo.orderItemDtos.refundSn &&
                    orderInfo.orderType != 3
                "
                class="action-btn"
                @click="toApplyReturn(orderInfo.orderItemDtos.orderItemId, 1)"
                >{{$t('orderDetails.refundsEntireOrders')}}</a
              >
              <!-- <a
                href="javascript:void(0)"
                v-if="!orderInfo.canRefund && !orderInfo.canAllRefund && orderInfo.orderItemDtos[0].refundSn && orderInfo.orderItemDtos.length == 1"
                class="action-btn"
                @click="toViewRefund(orderInfo.orderItemDtos[0].refundSn,1,orderInfo.orderItemDtos[0].orderItemId,orderInfo.orderItemDtos[0].returnMoneySts)"
              >查看退款</a>-->
            </div>
          </div>
          <div class="goods-total">
            <div class="item">
              <span class="tit">{{$t('orderDetails.totalMerchandise')}}：</span>
              <span class="price"
                >￥{{ parsePrice(orderInfo.total)[0] }}.{{
                  parsePrice(orderInfo.total)[1]
                }}</span
              >
            </div>
            <div class="item">
              <span class="tit">{{$t('orderDetails.productOffer')}}：</span>
              <span class="price"
                >-￥{{ parsePrice(orderInfo.reduceAmount)[0] }}.{{
                  parsePrice(orderInfo.reduceAmount)[1]
                }}</span
              >
            </div>
            <div class="item">
              <span class="tit">{{$t('orderDetails.shippingFee')}}：</span>
              <span class="price"
                >￥{{ parsePrice(orderInfo.transfee)[0] }}.{{
                  parsePrice(orderInfo.transfee)[1]
                }}</span
              >
            </div>
            <div class="item">
              <span class="tit">{{
                orderInfo.status == 1 ? $t('orderDetails.amountPayable') : $t('orderDetails.actualAmount')
              }}</span>
              <span class="price big">
                <span v-if="orderInfo.actualTotal"
                  >￥{{ parsePrice(orderInfo.actualTotal)[0] }}.{{
                    parsePrice(orderInfo.actualTotal)[1]
                  }}</span
                >
                <span v-if="orderInfo.actualTotal && orderInfo.orderScore"
                  >+</span
                >
                <span v-if="orderInfo.orderScore"
                  >{{ orderInfo.orderScore }} {{$t('orderDetails.points')}}</span
                >
              </span>
            </div>
          </div>
          <!-- 提示弹窗 -->
          <div class="popup-mask" v-if="showTips"></div>
          <div class="popup-box" v-if="showTips">
            <div class="tit">
              <div class="text">{{$t('tips')}}</div>
              <div class="close" @click="showTips = 0"></div>
            </div>
            <div class="con">
              <div class="tip">
                <div class="tip-icon warning"></div>
                <div class="tip-info">
                  <div class="result">{{$t('orderDetails.confirmCancellation')}}</div>
                  <div class="date">{{$t('orderDetails.confirmCancellationTips')}}</div>
                  <div class="btns">
                    <a
                      href="javascript:void(0);"
                      class="btn-r"
                      @click="cancelOrder"
                      >{{$t('determine')}}</a
                    >
                    <a
                      href="javascript:void(0);"
                      class="btn-g"
                      @click="showTips = 0"
                      >{{$t('cancel')}}</a
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /商品信息 -->
    </div>
  </div>
</template>

<script>
import util from '~/plugins/util'
export default {
  data () {
    return {
      orderNumber: '',
      orderInfo: {},
      userAddrDto: {},
      showTips: false,
      betweenTime: { day: '', hou: '', min: '', sec: '' }, // 订单支付倒计时
      timer: '', // 定时器
      indexs: 0,
      deliveryList: [],  //  包裹集合
      deliveryExpresse: null,  //  包裹信息
      offsetCount: 0,  //  偏移数

      isLastProd: false,  //最后一款商品
      irrevocable: false,  //不可撤销
      sum: [],  //本单已申请单个退款的商品数组
      dvyType: 1, //配送类型 1:快递 2:自提 3：无需快递
      stationUserName: '', //自提人名字
      stationUserMobile: '', //自提人手机号
      stationAddress: ''  //自提地址
    }
  },
  created () {
    this.orderNumber = this.$route.query.orderNumber
  },
  mounted () {
    // 设置网页标题
    document.title = this.$i18n.t('orderDetails.orderDetails')
    this.getOrderDetail()
    this.getDeliveryDet()
    // console.log(this.deliveryExpresse.deliveryDto.traces.length)
  },
  watch: {
    deliveryExpresse: function (newVal, oldVal) {
      this.$nextTick(() => {
        this.offsetCount = 0  //初始化变量
        if (this.deliveryExpresse) {
          this.$refs.carouser.style.left = '0px'
        }
      })
    }
  },
  methods: {

    /**
     * 获取支付订单详情
     */
    getOrderDet () {
      this.$axios.get('/p/order/getOrderPayInfoByOrderNumber', {
        params: {
          orderNumbers: this.orderNumber
        }
      }).then(({ data }) => {
        this.payOrderInfo = data
        this.betweenTimestamp = util.betweenTimestamp(new Date().getTime(), util.dateToTimestamp(data.endTime))
        if (this.betweenTimestamp > 0) {
          this.betweenTime = util.betweenTime(this.betweenTimestamp)
          this.countdown()
        } else {
        }
      })
    },

    /**
     * 倒计时
     */
    countdown () {
      this.betweenTimestamp = this.betweenTimestamp - 1000
      this.betweenTime = util.betweenTime(this.betweenTimestamp)
      if(Number(this.betweenTime.day === 0) && Number(this.betweenTime.hou === 0) && Number(this.betweenTime.min === 0) && Number(this.betweenTime.sec === 0)){
        clearTimeout(this.timer)
        history.go(0)
      }
      this.timer = setTimeout(() => {
        this.countdown()
      }, 1000)
    },

    /**
     * 获取订单详情
     */
    getOrderDetail () {
      this.$axios.get('/p/myOrder/orderDetail', {
        params: {
          orderNumber: this.$route.query.orderNumber
        }
      }).then(({ data }) => {
        if (data.status == 1) {
          // 订单待支付则获取待支付订单详情
          this.getOrderDet()
        }
        this.dvyType = data.dvyType
        this.orderInfo = data
        // 官方自营店判断
        this.orderInfo.shopId===null?this.orderInfo.shopId=0:this.orderInfo.shopId
        this.userAddrDto = data.userAddrDto  //地址Dto
        if (this.dvyType == 2) {
          this.getStationDetail()
        }
      })
    },

    // 获取自提点信息
    getStationDetail () {
      this.$axios.get('/p/myStationOrder/stationDetail', {
        params: {
          orderNumber: this.$route.query.orderNumber
        }
      }).then(({ data }) => {
        this.stationUserName = data.stationUserName //自提人的名字
        this.stationUserMobile = data.stationUserMobile //自提人的手机
        this.stationAddress = data.stationAddress //自提点的地址
      })
    },

    // 获取物流详情
    getDeliveryDet () {
      this.$axios.get('/p/myDelivery/orderInfo/' + this.orderNumber).then(({ data }) => {
        this.deliveryList = data //包裹集合信息
        this.deliveryExpresse = data[0] //包裹信息
      })
    },

    // 点击包裹tab事件
    onClickTabDelivery (delivery, index) {
      this.deliveryExpresse = delivery
      this.indexs = index
    },

    // 商品切换
    prevItem () {
      var len = this.deliveryExpresse.orderItems.length
      if (len - 5 > 0) {
        if (this.offsetCount > 0) {
          this.offsetCount--
          this.$refs.carouser.style.left = '-' + (70 * this.offsetCount) + 'px'
        } else {
          return false
        }
      } else if (len - 5 <= 0) {
        return false
      } else {
        return false
      }
    },

    nextItem () {
      var len = this.deliveryExpresse.orderItems.length
      if (len - 5 > 0) {
        if (this.offsetCount < len - 5) {
          this.offsetCount++
          this.$refs.carouser.style.left = '-' + (70 * this.offsetCount) + 'px'
        } else if (len - 5 <= 0) {
          return false
        } else {
          return false
        }
      } else {
        return false
      }
    },
    /**
     * 跳转店铺页面
     */
    toShopPage (shopId) {
      if(shopId===0){
        this.$router.push({ path: '/member-center/integral-mall' })
        return
        }
      this.$router.push({ path: '/shopIndex?sid=' + shopId })
    },
    /**
     * 跳转到个人中心
     */
    userCenter () {
      this.$router.push({ path: '/user-center' })
    },
    /**
    * 跳转到商品详情页
    */
    // toProdDetail (prodId) {
    //   this.$router.push({ path: '/detail/' + prodId })
    // },
    toProdDetail (prodId) {
      if (this.orderInfo.orderType == 3) {
        this.$router.push({ path: '/member-center/integral-det/' + prodId })
      } else {
        this.$router.push({ path: '/detail/' + prodId })
      }
    },
    /**
     * 根据订单状态跳转
     */
    // orderRoute (prodId) {
    //   this.toProdDetail(prodId)
    // },

    /**
     * 是否最后一个商品在执行单个商品退款事件
     */
    applyLastProdRefund: function () {
      if (this.orderInfo.status == 2) { //待发货状态下
        if (this.orderInfo.orderItemDtos.length > 1) {  //如果商品列表长度大于1
          let sum = []
          // 遍历商品list
          this.orderInfo.orderItemDtos.forEach((el, index) => {
            if (el.refundSn) { //如果拥有退款单号
              sum.push(el)
              this.sum = sum
            }
          })
          if (this.sum.length == this.orderInfo.orderItemDtos.length - 1) {
            // 如果拥有退款单号的商品数组长度等于商品列表数据长度-1，那么点击的这件商品就是最后一个订单项
            this.isLastProd = true
          }
        }
      }
    },

    /**
     * 申请退款
     */
    toApplyReturn (orderItemId, refundType) {  //refundType退款单类型（1:整单退款,2:单个物品退
      if (this.orderInfo.status == 2) {  //待发货
        if (refundType == 2) {  //单个退款
          this.applyLastProdRefund()  //是否最后一个订单项申请退款
          let orderItem = []
          this.orderInfo.orderItemDtos.forEach((el, index) => {
            el.isLastProd = this.isLastProd
            if (el.orderItemId == orderItemId) {  //如果当前的订单项id和点击传入的订单项id一致
              //保存数据
              orderItem.push(el)
            }
          })
          let refundProdObj = {}
          if (this.orderInfo.orderItemDtos.length == 1) {
            refundProdObj.isOnlyProd = true
          } else {
            refundProdObj.isOnlyProd = false
          }
          refundProdObj.orderItem = orderItem
          localStorage.setItem('refundProdObj', JSON.stringify(refundProdObj))  //将整个订单项保存
          console.log('(单个)退款商品信息对象：', refundProdObj)
        } else if (refundType == 1) {  //整单退款
          let refundProdObj = {}
          refundProdObj.orderItem = this.orderInfo.orderItemDtos
          refundProdObj.actualTotal = this.orderInfo.actualTotal
          localStorage.setItem('refundProdObj', JSON.stringify(refundProdObj))  //将整个订单所有项保存
          console.log('(整单)退款商品信息对象：', refundProdObj)
        }
        this.$router.push({
          path: '/user-center/apply-return',
          query: {
            orderNumber: this.orderNumber,
            transfee: this.orderInfo.transfee,
            status: this.orderInfo.status,
            // actualTotal: this.orderInfo.actualTotal,
            refundType: refundType,
          }
        })
      } else if (this.orderInfo.status != 2) {
        if (refundType == 2) {  //单个退
          let orderItem = []
          this.orderInfo.orderItemDtos.forEach((el, index) => {
            if (el.orderItemId == orderItemId) {  //如果当前的订单项id和点击传入的订单项id一致
              //保存数据
              orderItem.push(el)
            }
          })
          let refundProdObj = {}
          refundProdObj.orderItem = orderItem
          localStorage.setItem('refundProdObj', JSON.stringify(refundProdObj))  //将整个订单项保存
          console.log('(单个)退款商品信息对象：', refundProdObj)
        } else if (refundType == 1) {  //整单退款
          let refundProdObj = {}
          refundProdObj.orderItem = this.orderInfo.orderItemDtos
          refundProdObj.actualTotal = this.orderInfo.actualTotal
          localStorage.setItem('refundProdObj', JSON.stringify(refundProdObj))  //将整个订单所有项保存
          console.log('(整单)退款商品信息对象：', refundProdObj)
        }
        this.$router.push({
          path: '/user-center/apply-return',
          query: {
            orderNumber: this.orderNumber,
            status: this.orderInfo.status,
            transfee: this.orderInfo.transfee,
            // actualTotal: this.orderInfo.actualTotal,
            refundType: refundType,
          }
        })
      }
    },
    /**
     * 查看退款
     */
    toViewRefund (refundSn, refundType, orderItemId, returnMoneySts) {
      let transfee = this.orderInfo.transfee
      // returnMoneySts处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭)
      if (returnMoneySts < 4 && returnMoneySts != -1) {
        if (refundType == 2) {  //单个退款
          this.orderInfo.orderItemDtos.forEach((el, index) => {
            if (el.orderItemId == orderItemId) {  //如果当前的订单项id和点击传入的订单项id一致
              //保存数据
              let orderItem = []
              orderItem.push(el)
              localStorage.setItem('orderItem', JSON.stringify(orderItem))  //将整个订单项保存
            }
          })
        } else if (refundType == 1) {  //整单退款
          localStorage.setItem('orderItem', JSON.stringify(this.orderInfo.orderItemDtos))  //将整个订单所有项保存
        }
        this.toApplyReturn(orderItemId, refundType)  //申请售后
        //申请售后（详情）页
        this.$router.push({ path: '/user-center/apply-return?refundSn=' + refundSn + '&transfee=' + transfee + '&orderNumber=' + this.orderNumber })
      } else {
        //退款详情页
        this.$router.push({ path: '/return-detail?refundSn=' + refundSn + '&transfee=' + transfee })
      }
    },

    /**
     * 立即支付
     */
    toPayment () {
      sessionStorage.setItem("pay_total", this.orderInfo.actualTotal)
      sessionStorage.setItem("pay_orderNumber", this.orderNumber)
      // this.$router.push({ path: '/payment' })
      //点击立即支付时再次请求判断订单状态
      this.$axios.get('/p/order/getOrderPayInfoByOrderNumber', {
        params: {
          orderNumbers: this.orderNumber
        }
      }).then(({ data }) => {
        //H5其它端取消订单时对订单状态加判断
        if (data.status != 1) {
          this.$message({
            message: this.$i18n.t('orderDetails.orderChanged'),
            type: 'warning',
            duration: 1000
          })
          setTimeout(() => {
            window.location.reload();  //刷新页面
          }, 1000)
        } else {
          this.$router.push({ path: '/payment' })
        }
      })
    },

    /**
     * 取消订单
     */
    cancelOrder () {
      this.showTips = false
      this.$axios.put('/p/myOrder/cancel/' + this.orderNumber).then(({ data }) => {
        this.$message({
          type: 'success',
          message: this.$i18n.t('orderDetails.orderCancelled'),
          duration: 1000
        })
        this.$router.push({ path: '/user-center/uc-order' })
      })
    },

    /**
     * 价格处理
     */
    parsePrice: (value) => {
      var val = Number(value)
      if (!val) {
        val = 0;
      }
      // 截取小数点后两位，并以小数点为切割点将val转化为数组
      return val.toFixed(2).split(".");
    },
  },

  beforeDestroy () {
    clearTimeout(this.timer)
  }
}
</script>

<style soped src='~/assets/css/order-detail.css'></style>
<style scoped src='~/assets/css/user-center.css'></style>
<style>
.bg-fix {
  background-color: #f9f9f9 !important;
}
</style>
